<html>
<head>
<title></title>
<script src="lib/jquery.js"></script>
<script type="text/javascript" src="../src/webrpc.js"></script>
<script type="text/javascript">
var MY_FIGHTER_ID = "myFighter";
var ENEMY_ID_PREFIX = "enemy_";
var SHOT_ID_PREFIX = "shot_";

var score = 0;
var isStart = false;
var shootingService = null;

$(document).ready(function() {
    var text;
    try {
        webrpc.load("shooting.js", function(services, error){
            shootingService = services.shootingService;
            ready();
        }, ["outputService"]);
        text = document.createTextNode("Press Enter key to start.");
    } catch(e) {
        text = document.createTextNode("Please use other browser.");
    }
    var div = document.createElement("div");
    div.id = "attention";
    div.align = "center";
    div.style.color = "white";
    div.style.padding = "100px 0 0 0";
    div.appendChild(text);
    document.getElementById("field").appendChild(div);
});

function ready() {
    if (isStart) {
        document.getElementById("attention").firstChild.data = "";
        document.getElementById("myFighter").style.visibility = "visible";
        shootingService.main();
    } else {
        setTimeout(function() { ready(); }, 100);
    }
}

function keyDown(event) {
    if (event.keyCode == 13) { // Enter key
        isStart = true;
    }
    shootingService.setKeyDown(event.keyCode);
}

function keyUp(event) {
    shootingService.setKeyUp(event.keyCode);
}

document.onkeydown = this.keyDown;
document.onkeyup = this.keyUp;

var outputService = new webrpc.Service("outputService", {
    createEnemy : function(arrayId) {
        if (arrayId != null) {
            for (i = 0; i < arrayId.length; i++) {
                var img = document.createElement("img");
                img.id = ENEMY_ID_PREFIX + arrayId[i];
                img.style.position ="absolute";
                img.src = "./shooting_img/enemy.gif";
                img.border = "0";
                document.getElementById("field").appendChild(img);
            }
        }
    },
    createShot : function(arrayId) {
        if (arrayId != null) {
            for (i = 0; i < arrayId.length; i++) {
                var text = document.createTextNode("o");
                var span = document.createElement("span");
                span.id = SHOT_ID_PREFIX + arrayId[i];
                span.style.position ="absolute";
                span.style.fontSize = "12px";
                span.style.color ="yellow";
                span.style.padding ="0 0 0 7px";
                span.appendChild(text);
                document.getElementById("field").appendChild(span);
            }
        }
    },
    addScore : function(val) {
        score += val;
        document.getElementById("score").firstChild.data = score;
    },
    explode : function() {
        document.getElementById("myFighter").src = "./shooting_img/explosion.jpg";
    },
    setMyFighterCoordinates : function(x, y) {
        document.getElementById(MY_FIGHTER_ID).style.left = x + "px";
        document.getElementById(MY_FIGHTER_ID).style.top = y + "px";
    },
    setEnemyCoordinates : function(id, x, y) {
        document.getElementById(ENEMY_ID_PREFIX + id).style.left = x + "px";
        document.getElementById(ENEMY_ID_PREFIX + id).style.top = y + "px";
    },
    setShotCoordinates : function(id, x, y) {
        document.getElementById(SHOT_ID_PREFIX + id).style.left = x + "px";
        document.getElementById(SHOT_ID_PREFIX + id).style.top = y + "px";
    },
    alert: function(msg) {
        alert(msg);
    }
});
</script>
</head>
<body onKeyPress="keyDown(event);" onKeyUp="keyUp(event);" style="width: 220px; margin: 0;">
    <div id="field" style="height: 270px; background-color: black; margin: 0;">
        <img id="myFighter" style="position: absolute; visibility: hidden;" src="./shooting_img/myFighter.jpg" border="0">
    </div>
    <div style=" background-color: black; margin: 0; padding: 30px 0 10px 10px; color: white; font-size: 12px;">
        space key : shoot / cursor key : move<br>
        score: <span id="score">0</span>
    </div>
</body>
</html>
